<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
       
      
       @keyframes bounceInLeft {
        from,
        60%,
        75%,
        90%,
        to {
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        0% {
          opacity: 0;
          transform: translate3d(-3000px, 0, 0);
        }
        60% {
          opacity: 1;
          transform: translate3d(25px, 0, 0);
        }
        75% {
          transform: translate3d(-10px, 0, 0);
        }
        90% {
          transform: translate3d(5px, 0, 0);
        }
        100% {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes bounceInRight {
        from,
        60%,
        75%,
        90%,
        to {
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        0% {
          opacity: 0;
          transform: translate3d(3000px, 0, 0);
        }
        60% {
          opacity: 1;
          transform: translate3d(-25px, 0, 0);
        }
        75% {
          transform: translate3d(10px, 0, 0);
        }
        90% {
          transform: translate3d(-5px, 0, 0);
        }
        100% {
          opacity: 1;
          transform: none;
        }
      }

      .tu2{
        width: 700px;
        height: 1300px;
        position: absolute;
        /* transform:rotateY(180deg); */
        left: 20%;
        animation: bounceInLeft 0.7s 0.25s linear forwards;
      }
      .tu1 {
        width: 700px;
        height: 1300px;
        position: absolute;
      /* bottom: REM(194); */
        left: 60%;
        animation: bounceInRight 1.2s 0.6s linear forwards;
      }
      button {
        position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <div>
      <img class="tu1" src="./image/long.png" />
      <img class="tu2" src="./image/long.png" />
    </div>
    <div>
      <button style="height: 80px; width: 180px; color: rgb(237, 110, 229)">
        召唤坤龙
      </button>
    </div>
    <script>
      document.getElementsByTagName("button")[0].onclick = function () {
        location.href =
         "kun1.html";
      };
    </script>
  </body>
</html>
